/**
 * Created by zhulizhe on 2017/8/16.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    ScrollView,
    StyleSheet,
    Alert,
    Linking
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Constant from '../Contant'
import RequestUtil from '../util/NetUtil'
import {observer} from "mobx-react";
import {observable} from 'mobx'


// 头部用户信息组件
const MeHeader = observer(({onClick,userInfo})=>{
    let imgUrl = userInfo.userIconUrl||'' ;
    return (<TouchableOpacity
        activeOpacity={1}
        onPress={onClick}
        style={[{
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: '#fff',
            justifyContent: 'space-between',
            paddingVertical:10
        },styles.borderBottom]}>
        <View style={{flexDirection: 'row'}}>
            <Image style={{width: 64, height: 64, marginLeft: 10}}
                   source={{uri: imgUrl}}/>
            <View style={{justifyContent: 'space-around', marginLeft: 10}}>
                <Text style={{color: Constant.TEXT_COLOR_3, fontWeight: '400'}}>{userInfo.userName}</Text>
                <Text style={{color: 'gray', fontWeight: '100', fontSize: 13}}>{userInfo.phoneNum}</Text>
            </View>
        </View>
        <View style={{justifyContent: 'center', marginRight: 15}}>
            <Ionicons name="ios-arrow-forward-outline" size={28} color="#cccccc"/>
        </View>
    </TouchableOpacity>)
})

// 列表cell组件
const CommonCell = ({icon,name,onPress})=>{
    return <TouchableOpacity
        activeOpacity={0.8}
        onPress={onPress}
        style={[{
            paddingHorizontal:15,
            paddingVertical:15,
            flexDirection:'row',
            justifyContent:'space-between',
            backgroundColor:'#fff',
            alignItems:'center'
        },
            styles.borderBottom]}>
        <View style={{flexDirection:'row',alignItems:'center'}}>
            <Image
                source={icon}
                resizeMode='contain'
                style={{
                    marginRight:8,
                    width:24,
                    height:24
                }}/>
            <Text style={{color:Constant.TEXT_COLOR_3,fontSize:14}}>{name}</Text>
        </View>
        <View>
            <Ionicons name="ios-arrow-forward-outline" size={20} color="gray"/>
        </View>
    </TouchableOpacity>
}


@observer
export default class Me extends Component{

    @observable userInfo = {
        phoneNum:'',
        userName:'',
        userIconUrl:''
    }

    componentDidMount(){
        RequestUtil.requestData('user/me', {}).then((userInfo) => {
            if(userInfo == null)return;
            let userP = new Proxy(userInfo,{
                get:(target,props)=>{
                    return target[props]||'';
                }
            })
            this.userInfo = userP;
        })
    }

    render(){
        const { navigate } = this.props.navigation;
        return <View style={styles.flex}>
            <ScrollView style={[styles.flex,{backgroundColor:Constant.GRAYBGCOLOR}]}>
                <View style={{marginBottom:15}}>
                    <MeHeader
                        userInfo={this.userInfo}
                        onClick={()=>{
                            navigate('PersonInfo',{userInfo:this.userInfo})
                        }}/>
                </View>
                <View>
                    <View style={{marginBottom:15}}>
                        <CommonCell
                            onPress={()=>{
                                this.props.navigation.navigate('MineWaterTikets')
                            }}
                            icon={require('../../asserts/me/me_icon_shuipiao.png')}
                            name="水票"/>
                        <CommonCell
                            onPress={()=>{
                                this.props.navigation.navigate('MineWaterTikets')
                            }}
                            icon={require('../../asserts/me/me_icon_bucket.png')}
                            name="水桶管理"/>
                        <CommonCell
                            onPress={()=>{
                                this.props.navigation.navigate('AddressList')
                            }}
                            icon={require('../../asserts/me/me_icon_address.png')}
                            name="收货地址"/>
                    </View>
                    <CommonCell
                        onPress={()=>{
                            this.props.navigation.navigate('Setting')
                        }}
                        icon={require('../../asserts/me/me_icon_setup.png')}
                        name="设置"/>
                    <CommonCell
                        onPress={()=>{
                            Alert.alert(
                                '400-604-8300',
                                '',
                                [
                                    {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                                    {text: '呼叫', onPress: () => {
                                        Linking.canOpenURL('tel:400-604-8300') ;
                                    }},
                                ],
                                { cancelable: false }
                            )
                        }}
                        icon={require('../../asserts/me/me_icon_service.png')}
                        name="客服"/>
                </View>
            </ScrollView>
        </View>
    }
}


const styles =  {
    center:{
        justifyContent:'center',
        alignItems:'center'
    },
    flex:{
        flex:1
    },
    borderBottom: {
        borderBottomColor: Constant.SEPLINECOLOR,
        borderBottomWidth: StyleSheet.hairlineWidth
    },
}

